<!DOCTYPE html>
<html>

	<head>
		<title>Dropdown menu</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			/*body {
				background-image: url('images/banner.jpg');
				background-size: cover;
			}*/
			
			/*nav {
				width: 100%;
				height: 60px;
				background-color: #fff;
			}*/
			
			nav p {
				font-family: arial;
				font-size: 24px;
				/* 将每个单词转换成大写 */
				text-transform: uppercase;
				line-height: 55px;
				padding: 0 20px;
				float: left;
			}
			
			nav ul {
				float: left;
			}
			
			nav ul li {
				float: left;
				list-style: none;
				position: relative;
			}
			
			nav ul li a {
				display: block;
				font-family: arial;
				font-size: 14px;
				padding: 22px 10px;
				text-decoration: none;
			}
			
			nav ul li ul {
				display: none;
				position: absolute;
				background-color: #fff;
				padding: 10px;
				border-radius: 0px 0px 4px 4px;
			}
			
			nav ul li:hover ul {
				display: block;
			}
			
			nav ul li ul li {
				width: 160px;
				border-radius: 4px;
			}
			
			nav ul li ul li a {
				padding: 8px 10px;
				background-color:pink;
			}
			
			nav ul li ul li a:hover {
				background-color:red;
			}
		</style>

		<body>
			<nav>
				<p>ptravels</p>
				<ul>
					<!--<li>
						<a href="#">Home</a>
					</li>-->
					<li>
						<a href="#">Portfolio</a>
						<ul>
							<li>
								<a href="#">Data analysis</a>
							</li>
							<li>
								<a href="#">Artifical inteligence</a>
							</li>
							<li>
								<a href="#">Web development</a>
							</li>
						</ul>
					</li>
					<!--<li>
						<a href="#">About me</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>-->
				</ul>
			</nav>
		</body>

</html>